package com.hippo.core.ui.components

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.hippo.core.R
import com.hippo.core.core.ext.click
import com.hippo.core.state.DeviceValue
import com.hippo.core.ui.theme.HippoTheme


@Composable
fun RemoteControl(
    centerChecked:Boolean,
    modifier: Modifier = Modifier,
    onLeftClick: () -> Unit,
    onTopClick: () -> Unit,
    onRightClick: () -> Unit,
    onBottomClick: () -> Unit,
    onCenterClick: () -> Unit,
    onStopClick: () -> Unit,
) {



    Box(
        modifier = modifier.size(300.dp)
    ) {


        ManuLeft(
            modifier = Modifier
                .align(Alignment.CenterStart),
            onPress = onLeftClick,
            onTap = onStopClick
        )

        ManuTop(
            modifier = Modifier
                .align(Alignment.TopCenter),
            onPress = onTopClick,
            onTap = onStopClick
        )

        ManuRight(
            modifier = Modifier
                .align(Alignment.CenterEnd),
            onPress = onRightClick,
            onTap = onStopClick
        )

        ManuBottom(
            modifier = Modifier
                .align(Alignment.BottomCenter),
            onPress = onBottomClick,
            onTap = onStopClick
        )


        ImageStateButton(
            modifier = Modifier
                .align(Alignment.Center)
                .size(120.dp)
                .click { onCenterClick.invoke() },
            checkedImageRes = R.mipmap.control_start,
            defaultImageRes = R.mipmap.control_stop,
            checked = centerChecked
        )


    }


}


@Preview
@Composable
private fun ControlManuPreview() {
    HippoTheme {
        RemoteControl(
            centerChecked=true,
            onLeftClick = {},
            onTopClick = {},
            onRightClick = {},
            onBottomClick = {},
            onCenterClick = {},
            onStopClick = {}
            )
    }
}